<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1" charset="UTF-8">
    <title>注册</title>
    <script type="text/javascript" src="jquery/jquery-3.4.1.min.js"></script>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="css/signin.css" rel="stylesheet">
</head>
<body>
<div class="from-signin">
    <div class="form-row">
        <div class="form-group col-md-6">
            <label for="login_acct">账号</label>
            <span id="mes" style="font-size: 12px;color: red;"></span>
            <input type="text"  class="form-control" id="login_acct">
        </div>
        <div class="form-group col-md-6">
            <label for="user_pswd">密码</label>
            <span id="mesTwo" style="font-size: 12px;color: red;"></span>
            <input type="password" name="user_pswd" class="form-control" id="user_pswd">
        </div>
    </div>

    <div class="form-group">
        <label for="pswdConfirm">确认密码</label>
        <input type="password" name="user_name" class="form-control" id="pswdConfirm" >
    </div>

    <div class="form-group">
        <label for="email">email</label>
        <input type="text" name="email" class="form-control" id="email" >
    </div>

    <div class="form-row">
        <div class="form-group col-md-9">
            <label for="status">角色</label>
            <select id="status" name="status" class="form-control">
                <option selected value="0">店家</option>
                <option selected value="1">客户</option>
            </select>

        </div>

    </div>
    <div class="form-group">
        <label class="red hidden col-md-9" id="errorLog"></label>
    </div>
    <div class="row">
        <div class="col-lg-8 offset-2">
            <button class="btn btn-lg btn-primary btn-block " id="registerBtn">登录</button>
        </div>
    </div>
    <div class="panel-footer clearfix">
        <div>
            <p class="mt-5 mb-3 text-muted" id="p1">
                <button class="btn btn-link pull-right" id="returnRegister">
                    已注册？返回登录
                </button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;© 2020-2021 未经授权&nbsp;严禁转载
            </p>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        var userNameSuccessful = null;
        var passwordSuccessful = null;
        $("#returnRegister").click(function () {
            $(location).attr("href","login")
        });
        $("#login_acct").blur(function () {
            var strLogin = $("#login_acct").val();
            if (strLogin.trim()===""){
                $("#mes").text("用户名不能为空");
            }else {
                var unRag = /^[a-zA-Z][a-zA-Z0-9_]{6,14}$/;
                var ok = unRag.test(strLogin);
                if (ok){
                    userNameSuccessful = true;
                }else {
                    $("#mes").text("用户名必须在6-14位之间，且必须是数字和英文");
                }
            }
        });
        $("#login_acct").focus(function () {

           if ($("#mes").text() != null){
               $("#login_acct").val("");
           }
               $("#mes").text("")

        });
        $("#pswdConfirm").blur(function () {
            var pwd = $("#user_pswd").val();
            var pwd2 = $("#pswdConfirm").val();
            if (pwd.trim()===""){
                $("#mesTwo").text("密码不能为空");
            }else {
                if (pwd === pwd2){
                    $("#mesTwo").text("验证成功");
                    passwordSuccessful = true;
                }else {
                    $("#mesTwo").text("前后两次密码不一致");
                }
            }
        });
        $("#registerBtn").click(function () {
           if (userNameSuccessful && passwordSuccessful) {
               $.ajax({
                   url: "user/registered",
                   type: "post",
                   dataType: "json",
                   data: {
                       loginAcct: $("#login_acct").val(),
                       userPswd: $("#user_pswd").val(),
                       email: $("#email").val(),
                       status: $("#status").val()
                   },
                   success: function (result) {
                       var error = result.errorCode;
                       if (error == 0) {
                           $(location).attr("href", "login");
                       } else {
                           var msg = result.status;
                           $("#user_pswd").val("");
                           $("#errorLog").text(msg);
                           $("#errorLog").removeClass("hidden");
                       }
                   }

               })
           }else {
               alert("您输入的信息有误，请重新核对信息")
           }
        });

    });
</script>
</body>

</html>